{% extends "portal/manage_template.html" %}
{% load i18n %}
{% load staticfiles %}

{% block mycss %}
<link rel="stylesheet" href="{% static "portal/jquery-upload-file/css/uploadfile.css" %}">
{% endblock %}

{% block content %}

<div class="modal fade" id="ah_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加处理任务</h4>
          <p id="ah_title"></p>
      </div>
      <div class="modal-body">
          <label>处理任务名称</label>
          <select class="form-control" id="ah_name">
                <option value=""></option>
                {% for ah in roles.alert %}
                    <option value="{{ ah.name }}">{{ ah.name }}</option>
                {% endfor %}
          </select>
          <p></p>

          <label>处理任务说明</label>
          <p id="ah_desc"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-info" id="save_servers" onclick="save_handler();">保存</button>
          <div class="alert alert-success" style="display: none;">保存成功</div>
          <div class="alert alert-danger"  style="display: none;">保存失败</div>
      </div>
    </div>
  </div>
</div>


<div class="row">
    <div class="col-lg-12">
        {% for a2h in a2hs %}
        <div class="chat-panel panel panel-red">
            <div class="panel-heading">
                <i class="fa fa-bell fa-fw"></i>
                <a data-toggle="collapse" href="#{{ a2h.alert_name }}" class="" style="color: rgb(255,255,255)">
                    {{ a2h.alert_name }}
                </a>
                <div class=" pull-right">
                    <button type="button" class="btn btn-default btn-xs" onclick="add_handle('{{ a2h.alert_name }}');">添加处理任务</button>
                </div>
            </div>

            <div id="{{ a2h.alert_name }}" class="panel-collapse collapse" style="">
                <div class="panel-body">
                    <ul class="chat">
                        {% for h in a2h.alert_handler %}
                        <li class="left clearfix">
                            <span class="chat-img pull-left">
                                <img src="{% static "portal/img/handler.png" %}" alt="User Avatar" class="img-circle" width="80%">
                            </span>
                            <span class="chat-img pull-right">
                                <button type="button" class="btn btn-danger btn-xs" onclick="del_handle('{{ a2h.alert_name }}', '{{ h.name }}');">删除</button>
                            </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <strong class="primary-font">{{ h.name }}</strong>
                                </div>
                                <p>
                                    {{ h.desc | safe }}
                                </p>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block myjs %}
<script src="{% static "portal/jquery-upload-file/js/jquery.uploadfile.min.js" %}" ></script>
<script type="text/javascript" language="javascript">
function del_handle(alert_name, alert_handler)
{
    url = "/portal/api/1.0/alert/handler/del";
    postdata = {
        "aname": alert_name,
        "hname": alert_handler,
    }
    $.post(url, postdata, function (data) {
        var items = [];
        $.each(data, function (key, val) {
            items[key] = val;
        });
        if ( items['Result'] == 'OK' ) {
            location.reload();
        }
    });
}

function add_handle(alert_name)
{
    $('#ah_title').text(alert_name);
    $('#ah_modal').modal('show');
}

function save_handler()
{
    aname = $('#ah_title').text();
    hname = $("#ah_name").val();
    url = "/portal/api/1.0/alert/handler/add";
    postdata = {
        "aname": aname,
        "hname": hname,
    }
    $.post(url, postdata, function (data) {
        var items = [];
        $.each(data, function (key, val) {
            items[key] = val;
        });
        if ( items['Result'] == 'OK' ) {
            location.reload();
        }
    });
}

$(document).ready(function() {
    $("#ah_name").change(function() {
        var selected_h = $(this).val();
        if (selected_h == '')
        {
            $("#ah_desc").text('');
        }
        {% for ah in roles.alert %}
            if (selected_h == '{{ ah.name }}')
            {
                $("#ah_desc").html('{{ ah.desc | safe }}');
            }
        {% endfor %}
    });
});
</script>
{% endblock %}
